<script setup lang="ts">
import { graphic } from 'echarts'
import { sysDictionaryEncoApi } from '~/api'

import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'

import icon from './item-icon-1.png'

import ItemSummaryInfo from './item-summary-info.vue'

defineOptions({
  name: 'ItemOne',
})

const props = defineProps<{
  value1: string | number
  value2: string | number
}>()

const { chartRef, setOption } = useEcharts()

const maxValue = ref(0)
const minValue = ref(0)

const option = computed<EChartsOption>(() => {
  const roundValue = Math.round(+props.value1)
  const max = unref(maxValue)
  const min = unref(minValue) ?? 0
  return {
    series: [
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 4,
            color: [[1, 'rgba(30, 194, 250, 1)']],
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        radius: '70%',
      },
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 4,
            shadowBlur: 2,
            shadowColor: 'rgba(46, 137, 250, 0.2)',
            color: [[1, 'rgba(46, 137, 250, 1)']],
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        radius: '68%',
      },
      {
        type: 'gauge',
        startAngle: 230,
        endAngle: -50,
        min,
        max,
        center: ['50%', '64%'],
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, 'rgba(46, 139, 250, 0.2)']],
          },
        },
        radius: '67%',
        axisTick: {
          distance: 3,
          splitNumber: 2,
          lineStyle: {
            color: 'rgba(255,255,255,0.4)',
            width: 2,
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(255,255,255,0.4)',
          distance: 2,
          fontSize: 10,
        },
        progress: {
          show: true,
          width: 30,
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(46, 137, 250, 0.5)' },
              { offset: 1, color: 'rgba(23, 230, 255, 0.5)' },
            ]),
          },
        },
        pointer: {
          length: '60%',
          width: 4,
          offsetCenter: [0, '-20%'],
          itemStyle: {
            color: 'white',
          },
        },
        data: [{ value: roundValue }],
        detail: {
          show: true,
          fontSize: 12,
          color: '#17E6FF',
          offsetCenter: [0, '78%'],
          formatter: () => {
            return '实时功率'
          },
        },
        title: { show: false },
      },
      {
        type: 'pie',
        radius: '30%',
        center: ['50%', '64%'],
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.59,
            colorStops: [
              { offset: 0, color: '#09162b' },
              { offset: 0.8, color: '#143969' },
              { offset: 0.85, color: '#2479cf' },
              { offset: 1, color: '#2479cf' },
            ],
          },
        },
        emphasis: {
          disabled: true,
        },
        data: [{ name: roundValue.toString(), value: Math.abs(roundValue) }],
        label: {
          show: true,
          position: 'center',
          formatter(params: any) {
            return `{name|${params.name}}\n{unit|kw}`
          },
          rich: {
            name: {
              fontSize: 14,
              lineHeight: 20,
              fontFamily: 'PangMenZhengDao',
              fontWeight: 'normal',
              color: '#18def5',
            },
            unit: {
              fontSize: 12,
              lineHeight: 20,
              fontWeight: 'normal',
              color: '#a4c8de',
            },
          },
        },
      },
    ],
  }
})

async function getLimitValue() {
  const res = await sysDictionaryEncoApi.queryList('NENG_YUAN_SHENG_CHAN')
  const target1 = (res.data ?? []).find((v: any) => v.dicKey === 'POW_MAX')
  const target2 = (res.data ?? []).find((v: any) => v.dicKey === 'POW_MIN')
  maxValue.value = target1?.dicValue ? Number.parseFloat(target1?.dicValue) : 0
  minValue.value = target2?.dicValue ? Number.parseFloat(target2?.dicValue) : 0
}

onMounted(() => {
  getLimitValue()
  setOption(option.value)
})

watch([chartRef, option], () => {
  setOption(option.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="实时负荷看板" />
    <div class="block-body h-70 w-full flex-auto items-center">
      <div class="relative h-full w-full">
        <div ref="chartRef" style="width:100%;height:100%;" />
        <div class="gauge-tuo absolute bottom-0 left-0 right-0 h-4" />
        <ItemSummaryInfo
          class="absolute left-4 right-4 top-3"
          :icon="icon"
          :data="{
            title: '当日用电量',
            value: value2,
            unit: 'kwh',
          }"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gauge-tuo {
  background: url('./item-one-gauge-tuo.png') no-repeat center center;
  background-size: auto 100%;
}
</style>
